<template>
  <div>
    <Upload
      v-model:file-list="fileList"
      action=""
      list-type="picture-card"
      :before-upload="beforeUpload"
      @remove="handleRemove"
    > 
    <!-- //accept=".png" -->
      <div v-if="fileList.length < props.maxPic">
        <plus-outlined />
        <div style="margin-top: 8px">上传</div>
      </div>
    </Upload>
    <ImagePreview :imageList="imgList" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'UploadImg',
    inheritAttrs: false,
  });
</script>

<script lang="ts" setup>
  import { computed, unref, ref, watch } from 'vue';
  import { Button, Tag, Avatar, Upload, Image } from 'ant-design-vue';
  import { PictureOutlined } from '@ant-design/icons-vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import type { UploadProps } from 'ant-design-vue';
  import { buttonProps } from './props';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting } from '/@/hooks/setting';
  import { FileItem } from '/@/components/Upload/src/typing';
  import { uploadImage } from '/@/api/sys/upload';

  const globSetting = useGlobSetting();
  const { createMessage, createErrorModal } = useMessage();
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();
  const tk = userStore.getToken;

  const props = defineProps(buttonProps);
  // get component class
  const attrs = useAttrs({ excludeDefaultKeys: false });
  const getButtonClass = computed(() => {
    const { color, disabled } = props;
    return [
      {
        [`ant-btn-${color}`]: !!color,
        [`is-disabled`]: disabled,
      },
    ];
  });

  const fileList = ref<UploadProps['fileList']>([]);

  const imgList: string[] = [];
  const handleRemove: UploadProps['onRemove'] = (file) => {
    const index = fileList.value.indexOf(file);
    const newFileList = fileList.value.slice();
    newFileList.splice(index, 1);
    fileList.value = newFileList;

    props.onChange(fileList.value);
  };

  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
    fileList.value = [...fileList.value, file];
    props.onChange(fileList.value);
    return false;
  };

  // get inherit binding value
  const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
</script>
